<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        #bigFather{
            position: relative;
            margin: 200px auto 0;
            width: 600px;
            height: 500px;
            background-color: rgba(255,255,255,0.3);
        }
        #fanhui{
            margin-top: 20px;
            width: 120px;
            float: left;
        }
        #head{
            margin: 20px auto 0;
            padding-top: 20px;
            width: 200px;
            height: 50px;
            text-align: center;
        }
        #info{
            width: 600px;
            height: 180px;
            margin: 30px auto 0;
        }
        #mima{
            width: 600px;
            height: 120px;
            margin: 0 auto;
        }
        .duinput{
            position: relative;
            width: 50%;
            font-size:14px;
            height:40px;
            border-radius:5px;
            border:1px solid #4abbd8;
            color:black;
            outline:0;
            text-align:left;
            padding-left: 10px;
            display:block;
        }
        #xiugaimima{
            background-color: rgba(0,0,0,0.9);
            z-index: 30;
            float: left;
            left: 50%;
            margin-left: -400px;
            position: relative;
            width: 800px;
            height: 500px;
            border: 1px solid red;
            display: none;
        }
        #yanzhengdianhua{
            background-color: white;
            z-index: 10;
            float: left;
            left: 50%;
            margin-top: 60px;
            margin-left: -400px;
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid red;
            display: none;
        }
        #yanzhengxindianhua{
            background-color: white;
            z-index: 20;
            float: left;
            left: 50%;
            margin-top: 60px;
            margin-left: -400px;
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid red;
            display: none;
        }
        .fasong{
            cursor: pointer;
            position: relative;
            border-radius:20px;
            height: 42px;
            width: 120px;
            color: white;
            background-color: #00a7de;
        }
        .duform{
            width: 500px;
            height: 130px;
            float: left;
        }
        .sex{
            margin-left: 200px;
            width: 300px;
            height: 40px;
        }
        .address{
            margin-left:120px;
            margin-top: 20px;
            width: 400px;
            height: 40px;
        }
        input::-webkit-input-placeholder{
            color: #4abbd8;
            font-size: 14px;
        }
        .zhuce{
            position: absolute;
            width: 150px;
            height: 35px;
            left: 50%;
            margin-left: -75px;
            margin-top: 200px;
        }
        .register{
            position: absolute;
            border-radius:20px;
            width: 150px;
            height: 35px;
            background-color: #00a7de;
            color: white;
        }
        .gg{
            width: 120px;
            position: absolute;
            float: left;
            margin-left: 80px;
            margin-top: 100px;
        }
        button{
            outline: none;
            border: none;
        }
        .register:hover {
            background-color:#3eb5de;
        }
        #fanhui b{color: #cf0d22 }
        #fanhui b:hover{color: black}
        body i{color: white}
    </style>
</head>
<body>
<div id="xiugaimima">
    <div id="xgmm">
        <div style="width: 50px;margin-right: 20px;float: right">
            <a style="cursor: pointer;width: 200px;color:white;font-size: 1.5em" id="qxmm">取消</a>
        </div>
        <div style="width: 200px;margin: 20px 0px 50px 300px;text-align: center"><b style="color: white;font-size: 2em">修改密码</b></div>

        <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
        <input id="yuanpsw" type="password" style="margin: 0 0 50px 22%" class="duinput" lay-verify="required" autocomplete="off" placeholder="输入原密码">

        <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
        <input id="psw" type="password" style="margin: 0 0 50px 22%" class="duinput" lay-verify="required" autocomplete="off" placeholder="输入新密码">

        <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
        <input id="qdpsw" type="password" style="margin: 0 0 50px 22%" class="duinput" lay-verify="required" autocomplete="off" placeholder="确定新密码">

        <div style="margin-left: 300px;width: 200px">
            <button class="fasong" style="width: 200px;background-color: white;color:black" id="tijiaomima">确认更改</button>
        </div>

    </div>
</div>


<div id="yanzhengdianhua">
    <div style="width: 300px;padding-top: 50px;margin-left: 250px;text-align: center">
        <b style="font-size: 2em">验证原电话号码</b>
    </div>
    <div style="width: 500px;margin-left: 200px;margin-top: 30px">
        <div style="float: left;padding-top: 5px">
            <b style="font-size: 1.5em">需验证电话号码:</b>
        </div>
        <input id="phone" value="" style="margin:0 0 30px 10px;float: left" class="duinput" disabled="disabled">
    </div>
<div style="width: 300px;margin-left: 285px">
    <div style="float: left;padding-top: 5px;text-align: center">
        <b style="font-size: 1.5em">验证码:</b>
    </div>
    <input id="yzm" style="margin:0 0 0px 10px;width: 160px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="验证码">
</div>
    <div style="float: left;width:120px;height: 50px;"><button id="fasong" class="fasong">发送验证码</button></div>
    <div style="float: left;margin-left: 270px;margin-top: 30px;width:120px;height: 50px;"><button id="tijiao" class="fasong">提交</button></div>
    <div style="float: left;margin-left: 40px;margin-top: 30px;width:120px;height: 50px;"><button id="quxiao" class="fasong">取消</button></div>
</div>


<div id="yanzhengxindianhua">
    <div style="width: 300px;margin-left: 250px;text-align: center">
        <b style="font-size: 2em">验证新电话号码</b>
    </div>
    <div style="width: 500px;margin-left: 200px;margin-top: 30px">
        <div style="float: left;padding-top: 5px">
            <b style="font-size: 1.5em">绑定新电话号码:</b>
        </div>
        <input id="xinphone" value="" style="margin:0 0 30px 10px;float: left" class="duinput">
    </div>
    <div style="width: 300px;margin-left: 285px">
        <div style="float: left;padding-top: 5px;text-align: center">
            <b style="font-size: 1.5em">验证码:</b>
        </div>
        <input id="xinyzm" style="margin:0 0 0px 10px;width: 160px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="验证码">
    </div>
    <div style="float: left;width:120px;height: 50px;"><button id="xinfasong" class="fasong">发送验证码</button></div>
    <div style="float: left;margin-left: 340px;margin-top: 30px;width:120px;height: 50px;"><button id="xintijiao" class="fasong">提交</button></div>
</div>
<div id="bigFather">
    <div id="fanhui"><a href="user_index.html"><b><i style="float:left;margin:5px 0 20px 22%;font-size: 1.5em" class="layui-icon layui-icon-return">&nbsp;返&nbsp;回</i></b></a></div>
    <div id="head"><b style="font-size: 2.5em">个&nbsp;人&nbsp;信&nbsp;息</b></div>
    <div id="info">
        <i style="float:left;margin:5px 0 20px 22%;font-size: 2em" class="layui-icon layui-icon-username"></i>
        <input id="name"  style="margin: 0 0 20px 10px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="昵称" disabled="disabled">

        <form class="layui-form duform" action="" lay-filter="data">
            <div class="layui-input-block sex">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
                <input type="radio" name="sex" value="zbb" title="周贝贝">
            </div>


            <div class="layui-form-item address" style="padding-right: 55px;">
                <i style="float:left;margin:5px 0 0 10px;font-size: 2em" class="layui-icon layui-icon-location"></i>
                <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 9.5em !important;float: left;margin-left:10px">
                    <select class="aa" required name="province" id="province" lay-filter="province">
                        <option value="">选择省份</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 12em !important;float: left">
                    <select required name="city" id="city">
                        <option value="">请先选择省份</option>
                    </select>
                </div>
            </div>
        </form>
        <div id="zhuce" class="zhuce">
            <button id="register" class="register" style="font-size: 1.2em">确&nbsp;&nbsp;认&nbsp;&nbsp;修&nbsp;&nbsp;改</button>
        </div>
    </div>
    <div id="mima">
        <div class="gg">
            <button class="fasong" id="genggaidianhua">更改电话号码</button>
        </div>

        <div class="gg"style="margin-left: 410px">
            <button class="fasong" id="genggaimima">更改密码</button>
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script src="js/addressSelect.js" charset="utf-8"></script>
<script>
    var tele=0;
    var tttt=0;

    for (var i = 0; i < addressSelect.length; i++) {
        $("#province").append("<option value='" + i + "'>" + addressSelect[i].name + "</option>");
    }
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer;
        var form = layui.form;

        form.on('select(province)', function(data) {
            if (data.value.length < 0) return false;
            $("#city").empty();
            for (var i = 0; i < addressSelect[data.value].city.length; i++) {
                $("#city").append("<option value='" + i + "'>" + addressSelect[data.value].city[i].name +
                    "</option>");
            }
            form.render('select');
        });

        $('#register').on('click', function(){
            var data = form.val('data');
            data.username =$('#name').val();
            data.id=sessionStorage.getItem('userId')
            data.city = addressSelect[data.province].city[data.city].name;
            data.province = addressSelect[data.province].name;
                $.ajax({
                    url: '/user/updateInfo',
                    method: 'POST',
                    contentType: 'application/json',
                    async: true,
                    data: JSON.stringify(data),
                    success: function(res) {
                        layer.confirm(res.msg)
                    }
                })
        })
    })

    $.ajax({
        url: '/user/getUserInfoById/'+sessionStorage.getItem('userId'),
        method: 'GET',
        contentType: 'application/json',
        success: function(res) {
            $('#name').val(res.data.username)
            tele=res.data.telephone;
            $("#phone").val(tele)
        }
    })




    $('#qxmm').click(function () {
        $('#xiugaimima').css('display','none')
        }
    )

    $('#tijiaomima').click(function () {
        let ps=$('#psw').val();
        let qdps=$('#qdpsw').val()
        if (ps==qdps){
            $.ajax({
                url: '/user/changePassword',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    id:sessionStorage.getItem('userId'),
                    password: $('#yuanpsw').val(),
                    newPassword: $('#psw').val()
                }),
                success: function(res) {
                    layer.msg(res.msg)
                    if (res.code==200){
                        $('#xiugaimima').css('display','none')
                    }
                }
            })
        }
       else {layer.msg('两次密码填写不一致')}
    })

    $('#genggaidianhua').click(function () {
        $('#yanzhengdianhua').css('display','block');
    })

    $('#quxiao').click(function () {
        $('#yanzhengdianhua').css('display','none');
    })

    $('#genggaimima').click(function () {
        $('#xiugaimima').css('display','block');
    })

    $('#fasong').click(function () {
        $.ajax({
            url: '/user/sendSms/'+tele,
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                layer.msg(res.msg)
            }
        })
    })

    $('#xinfasong').click(function () {
        tttt=$('#xinphone').val()
        if (tttt==''){
            layer.msg('手机号码为空');
        }
        else {
            $.ajax({
                url: '/user/sendSms/'+tttt,
                method: 'GET',
                contentType: 'application/json',
                success: function(res) {
                    layer.msg(res.msg)
                }
            })
        }
    })

    $('#tijiao').click(function () {
        $.ajax({
            url: '/user/isOldTel',
            method: 'POST',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                telephone:tele,
                code:$('#yzm').val()
            }),
            contentType: 'application/json',
            success: function(res) {
                layer.msg(res.msg);
                if (res.code==200){
                    $('#yanzhengdianhua').css('display','none');
                    $('#yanzhengxindianhua').css('display','block');
                }
                else if (res.code==400){
                }
            }
        })
    })


    $('#xintijiao').click(function () {
        $.ajax({
            url: '/user/updateTel',
            method: 'POST',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                telephone:tttt,
                code:$('#xinyzm').val()
            }),
            contentType: 'application/json',
            success: function(res) {
                layer.msg(res.msg);
                if (res.code==200){
                    $('#yanzhengdianhua').css('display','none');
                    $('#yanzhengxindianhua').css('display','none');
                }
                else if (res.code==400){
                }
            }
        })
    })

</script>

</body>
</html>